package com.tencent.compose.sample.mainpage.sectionItem

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.BottomAppBar
import androidx.compose.material.ContentAlpha
import androidx.compose.material.DrawerValue
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.FloatingActionButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
import org.jetbrains.compose.ui.tooling.preview.Preview


@Preview()
@Composable
internal fun BottomAppBarDemo() {
    // 1. 状态管理：记录「首页」按钮的选中状态（模拟底部导航的选中逻辑）
    var isHomeSelected by remember { mutableStateOf(true) }
    var scaffoldState = rememberScaffoldState(
        drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    )
    var isFavorite by remember { mutableStateOf(false) }

    // 2. 定义颜色常量：统一管理，便于后续修改主题
    val appBarBgColor = Color(0xFF6200EE)
    val selectedIconColor = Color.White
    val unselectedIconColor = Color(0xFFE0E0E0)
    val fabColor = Color(0xFFBB86FC)

    // 3. 使用 Scaffold 作为父容器：
    //    - 提供完整的页面结构（底部导航栏 + 悬浮按钮 + 主内容区）
    //    - 自动处理 BottomAppBar 与 FAB 的布局关系（如嵌入效果）

    // 4. 创建协程作用域，用于处理需要在协程中执行的操作（如抽屉状态变更）
    val coroutineScope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        // 底部导航栏配置
        bottomBar = {
            BottomAppBar(
                windowInsets = AppBarDefaults.bottomAppBarWindowInsets,
                backgroundColor = appBarBgColor,
                cutoutShape = CircleShape,
                elevation = 8.dp
            ) {
                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
                    IconButton(
                        onClick = {
                            coroutineScope.launch {
                                if (scaffoldState.drawerState.isOpen){
                                    scaffoldState.drawerState.close()
                                } else{
                                  scaffoldState.drawerState.open()
                                }
                            }
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "打开侧边菜单",
                            tint = selectedIconColor
                        )
                    }
                }

                Spacer(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxWidth()
                )

                IconButton(
                    onClick = { isHomeSelected = true }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Home,
                        contentDescription = "首页",
                        tint = if (isHomeSelected) selectedIconColor else unselectedIconColor
                    )
                }

                // 收藏按钮
                IconButton(
                    onClick = { isFavorite = !isFavorite }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = if (isFavorite) "取消收藏" else "添加收藏",
                        // 未选中状态（浅灰色）
                        tint = if (isFavorite) Color.Red else Color.White
                    )
                }

                // 设置按钮（新增，丰富功能场景）
                IconButton(
                    onClick = { /* 实际项目中可打开设置页面 */ }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Settings,
                        contentDescription = "设置",
                        tint = unselectedIconColor // 未选中状态（浅灰色）
                    )
                }
            }
        },

        // 悬浮按钮配置（与 BottomAppBar 配合实现嵌入效果）
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* 实际项目中可触发核心操作，如「添加内容」「发布」 */ },
                backgroundColor = fabColor,
                elevation = FloatingActionButtonDefaults.elevation(
                    defaultElevation = 8.dp,
                    pressedElevation = 12.dp
                )
            ) {
                Icon(
                    imageVector = Icons.Filled.Add,
                    contentDescription = "添加内容",
                    tint = Color.White
                )
            }
        },

        // 悬浮按钮位置：居中并嵌入 BottomAppBar（Docked 模式）
        floatingActionButtonPosition = androidx.compose.material.FabPosition.Center,
        isFloatingActionButtonDocked = true,

                // 抽屉菜单内容
        drawerContent = {
            Text(
                text = "侧边抽屉菜单",
                modifier = Modifier.padding(16.dp)
            )
        }
    ) { innerPadding ->
        // 4. 主内容区域：
        //    - innerPadding：Scaffold 自动计算的内边距（避免内容被 BottomAppBar 或状态栏遮挡）
        //    - 实际项目中可替换为 List、Column 等组件
        Text(
            text = if (isHomeSelected) "首页内容区" else "其他页面内容区",
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxWidth()
                .height(400.dp),
            color = Color.Black,
            fontSize = 18.sp
        )
    }
}